<!--应用请求详情-->
<template>
    <div id="network_id" class="network" style="height:300px"></div>
</template>
<script>
    import Vis from 'vis'

    export default {
        name: 'topology',
        components: {},
        data() {
            return {
                dataList: [],

                nodes: [],
                edges: [],
                container: null,
                nodesArray: [
                    /* {id: 0, label: "0", group: '0'}*/
                ],

                edgesArray: [
                    /* {from: 1, to: 0, label: "hahah"},*/
                ],

                options: {},

                data: {}

            }
        },
        methods: {
            init(data) {
                console.log(data);
                this.dataList = data;
                this.resetAllNodesStabilize();
                let this_ = this;
                data.forEach((item, index) => {
                    this_.nodesArray.push({
                        id: item.spanId,
                        label: (item.methodName === 'prepare' ? "数据库" : item.methodName) + "(" + item.hostIp + ")",
                        group: item.hostIp
                    });
                    this_.edgesArray.push({from: item.spanId, to: item.parentId, label: index});
                });
                this_.nodes = new Vis.DataSet(this_.nodesArray);
                this_.edges = new Vis.DataSet(this_.edgesArray);
                this_.container = document.getElementById('network_id');
                this_.data = {
                    nodes: this_.nodes,
                    edges: this_.edges

                };

                this_.options = {
                    autoResize: true,
                    groups: {
                        useDefaultGroups: true,
                        myGroupId: {
                            /*node options*/
                        }
                    },

                    nodes: {
                        shape: 'dot',
                        size: 30,
                        font: {
                            size: 12,
                        },
                        borderWidth: 2

                    },
                    edges: {
                        width: 1,
                        shadow: true,
                        smooth: {//设置两个节点之前的连线的状态
                            enabled: true //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
                        },
                        arrows: {
                            from: {
                                enabled: true,
                                scaleFactor: 1,
                                type: "arrow"
                            },
                        },
                        color: {
                            color: "#bc68e6",
                            highlight: "yellow",
                            hover: "#1fe1c6",
                            inherit: "from",
                            opacity: 1.0
                        },
                        font: {
                            color: 'yellow',
                            size: 14,
                            face: 'arial',
                            background: 'white',
                            strokeWidth: 10,
                            strokeColor: 'rgb(112, 184, 240)',
                            align: 'horizontal',
                            multi: false,
                            vadjust: 0,
                            bold: {
                                color: "green",
                            },
                        },
                    },

                    physics: { //计算节点之前斥力，进行自动排列的属性
                        enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
                        barnesHut: {
                            gravitationalConstant: -4000,
                            centralGravity: 0.3,
                            springLength: 120,
                            springConstant: 0.04,
                            damping: 0.09,
                            avoidOverlap: 0
                        }

                    },

                    interaction: {
                        dragNodes: false, //是否能拖动节点
                        dragView: true, //是否能拖动画布
                        hover: true, //鼠标移过后加粗该节点和连接线
                        multiselect: false, //按 ctrl 多选
                        selectable: true, //是否可以点击选择
                        selectConnectedEdges: true, //选择节点后是否显示连接线
                        hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
                        zoomView: false //是否能缩放画布

                    },

                    manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
                        enabled: false
                    }
                };
                this_.network = new Vis.Network(this_.container, this_.data, this_.options);

                this_.network.on("click", function (params) {
                    let spanId = this.getNodeAt(params.pointer.DOM);
                    let dataId = this_.dataList.filter(item => item.spanId === spanId)[0].dataId;
                    this_.$emit("change", dataId);
                });
            },
            resetAllNodes() {
                let this_ = this;
                this_.nodesArray = [];
                this_.edgesArray = [];
                this_.nodes.clear();
                this_.edges.clear();
                this_.nodes.add(this_.nodesArray);
                this_.edges.add(this_.edgesArray);
                this_.data = {
                    nodes: this_.nodes,
                    edges: this_.edges
                };
                this_.network = new Vis.Network(this_.container, this_.data, this_.options);
            },
            resetAllNodesStabilize() {
                let this_ = this;
                try {
                    this_.resetAllNodes();
                    this_.network.stabilize();
                } catch (e) {
                    console.log(e)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
